<template>
 <div class="container">
     <h1>{{$route.meta.title}}</h1>
     <div class="btn-box">
         <button class="btn" @click="add">新增</button>
        
     </div>
     <!-- 表格 -->
     <Table :arr="arr" @sendItem='sendItem($event)'/>
     <!-- 弹窗 -->
     <Model :info="info" @submit="submit($event)"  ref="modelRef" />
 </div>
</template>

<script>
import Table from '../components/Table.vue'
import Model from '../components/Model.vue'
export default {
    data(){
         return{
             info:{
                 isShow:false,
                 isEdit:false,
             },
              editInfo:{
                    name:'',
                    sex:'male',
                    age:18
                },
             arr:JSON.parse(localStorage.getItem('userList')||'[]')
         }
    },
    created(){
    },
    methods:{
        add(){
            // 弹框显示
            this.info.isShow = true;
        },
       
        submit(e){
            
            if(this.info.isEdit){
                let index = this.arr.findIndex(item=>{
                    return item.id == e.id;
                })
                
                this.arr.splice(index,1,e);
            }else{
                 let obj={
                    id:this.arr.length == 0?1:this.arr[this.arr.length-1].id+1,
                    name:e.name,
                    sex:e.sex,
                    age:e.age
                 }
                this.arr.push(obj);
                
            }
            this.info={
                 isShow:false,
                 isEdit:false,
             }
            
            localStorage.setItem('userList',JSON.stringify(this.arr))
        },
        sendItem(item) {
            this.info.isShow = true;
            this.info.isEdit = true;
            this.$refs.modelRef.sendItem(item)
        }
    },
    components:{
        Table,Model
    }
}

</script>
<style scoped>
.btn {
    width: 100px;
    height: 50px;
    border: 0;
    border-radius: 10px;
    font-size: 20px;
    color: #fff;
    background-color: rgb(16, 139, 221);
    cursor: pointer;
}
.container {
    width: 400px;
    margin: 0 auto;
}
.btn-box {
    margin-bottom: 20px;
}
</style>